<template>
  <div class="m-container">
    <el-form :inline="true" :model="form">
      <el-form-item label="部门">
        <el-select v-model="form.deptId" placeholder="请选择部门" @change="getDeptWages">
          <el-option v-for="item in depts" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="initDeptStaffWage">生成部门员工工资信息</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">部门员工信息</el-divider>
    <el-table :data="tableData" style="width: 100%" height="90%" v-loading="loading">
      <el-table-column type="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="name" label="姓名" width="100"></el-table-column>
      <el-table-column prop="sex" label="性别" width="100"></el-table-column>
      <el-table-column prop="age" label="年龄" width="100"></el-table-column>
      <el-table-column prop="rawRole" label="身份" width="100"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="showWagePage(scope.row)" type="text" size="small" >详情</el-button>
          <el-button @click="deleteEmpWage(scope.row)" type="text" size="small" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog title="工资信息" v-model="dlgWageInfo" :fullscreen=true>
    <el-form ref="meritForm" :model="meritForm" :rules="wageFormRules" label-width="240px">
      <el-divider content-position="left"><h3>员工基本信息</h3></el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="姓名">{{meritForm.name}}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="部门">{{meritForm.dept}}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别">{{meritForm.sex=='M'?'男':'女'}}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年龄">{{meritForm.age}}岁</el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left"><h3>基本工资</h3></el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="岗位工资" prop="posPay">
            <el-input v-model.number="meritForm.posPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="薪级工资" prop="salaryPay">
            <el-input v-model.number="meritForm.salaryPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="提高10%" prop="ratio">
            <el-input v-model.number="meritForm.ratio" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left"><h3>绩效工资</h3></el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="月份基础绩效" prop="monthMerit">
            <el-input v-model.number="meritForm.monthMerit" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年末绩效工资" prop="yearMerit">
            <el-input v-model.number="meritForm.yearMerit" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="超课时绩效" prop="extraLessonMerit">
            <el-input v-model.number="meritForm.extraLessonMerit" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="学生管理绩效" prop="counsellorAllowance">
            <el-input v-model.number="meritForm.counsellorAllowance" placeholder="辅导员/班主任津贴、值班费"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="专项奖惩绩效" prop="specialMerit">
            <el-input v-model.number="meritForm.specialMerit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="加班绩效" prop="overtimeMerit">
            <el-input v-model.number="meritForm.overtimeMerit" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left"><h3>津贴补贴</h3></el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="改革性补贴" prop="reformPay">
            <el-input v-model.number="meritForm.reformPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工改保留" prop="reservePart">
            <el-input v-model.number="meritForm.reservePart" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="2000年1月1日参加工作补贴" prop="newEmpSubsidy">
            <el-input v-model.number="meritForm.newEmpSubsidy" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="人才引进专项补贴" prop="talentIntroPay">
            <el-input v-model.number="meritForm.talentIntroPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="专业（学科）带头人津贴" prop="proLeaderPay">
            <el-input v-model.number="meritForm.proLeaderPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="室主任津贴" prop="officeDirectorPay">
            <el-input v-model.number="meritForm.officeDirectorPay" placeholder="学管、教研室、实验室" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="技师津贴" prop="technicianPay">
            <el-input v-model.number="meritForm.technicianPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="卫生防疫津贴" prop="epidemicPay">
            <el-input v-model.number="meritForm.epidemicPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="护龄津贴" prop="nursePay">
            <el-input v-model.number="meritForm.nursePay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="安保人员津贴及值班费" prop="securityPay">
            <el-input v-model.number="meritForm.securityPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保密、密码及信访工作岗位津贴" prop="secretPay">
            <el-input v-model.number="meritForm.secretPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="专职司机工作补助" prop="driverPay">
            <el-input v-model.number="meritForm.driverPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="思政课教师岗位津贴" prop="politicTeacherPay">
            <el-input v-model.number="meritForm.politicTeacherPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="独子费" prop="onlyChildPay">
            <el-input v-model.number="meritForm.onlyChildPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="考务费及其他" prop="examPay">
            <el-input v-model.number="meritForm.examPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="公务交通补贴" prop="trafficPay">
            <el-input v-model.number="meritForm.trafficPay" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left"><h3>各项社会保险</h3></el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="养老保险" prop="endowmentIns">
            <el-input v-model.number="meritForm.endowmentIns" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="职业年金" prop="careerIns">
            <el-input v-model.number="meritForm.careerIns" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="医疗保险" prop="medicalIns">
            <el-input v-model.number="meritForm.medicalIns" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="失业保险" prop="unemploymentIns">
            <el-input v-model.number="meritForm.unemploymentIns" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="住房公积金" prop="housingProvidentFund">
            <el-input v-model.number="meritForm.housingProvidentFund" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" icon="el-icon-check" @click="saveMerit">保存工资信息</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
import { getDeptWages, getEmployeeWagesOfDept, saveWage, deleteEmployeeWage, initDeptStaffWage } from "@/api/salary";
import { eduList, degreeList, posList, roleList, mpList, tpList, spList, politicList, ethicList } from '@/api/items';
import { userInfoRules } from '@/api/rules';
import { ElMessage,ElMessageBox } from "element-plus";
export default defineComponent({
  name: "StaffWage",
  setup(props) {
    return { eduList, degreeList, posList, roleList, mpList, tpList, spList, politicList, ethicList, userInfoRules }
  },
  data() {
    return {
      depts: [],
      tableData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      userId: '',
      form: {
        deptId: ''
      },
      meritForm: {},
      dlgUserInfo: false,
      dlgWageInfo: false,
      loading: false,
      index: 0
    };
  },
  created() {
    // 获取部门列表
    getDeptWages().then((res) => {
      this.depts = res.data;
    });
  },
  methods: {
    // 获取部门员工列表
    getDeptWages() {
      this.loading = true
      getEmployeeWagesOfDept(this.form.deptId as any).then((res) => {
        this.tableData = res.data
        this.loading = false
      });
    },
    // 显示工资结构
    showWagePage(row: any, index: number) {
      this.index = index
      this.meritForm = row
      this.dlgWageInfo = true
    },
    // 保存工资信息
    saveMerit() {
      saveWage(this.meritForm)
      .then(res => {
        if(res.data === true) {
          ElMessage.success('保存成功')
        }
      })
    },
    // 删除员工工资信息
    deleteEmpWage(row: any) {
      deleteEmployeeWage(row.id).then(res => {
        if(res.data === true) {
          ElMessage.success('删除成功')
          this.getDeptWages()
        }
        else {
          ElMessage.error((res as any).message)
        }
      })
    },
    // 初始化部门员工工资信息
    initDeptStaffWage() {
      if(this.form.deptId) {
        initDeptStaffWage(this.form.deptId).then(res => {
          if(res.data === true){
            this.getDeptWages()
          }
        })
      }
    }
  },
  watch: {
    // 监听用户信息
    formUser: {
      handler(val, oldVal) {
      },
      deep:true //true 深度监听
    }
  }
});
</script>
<style scoped>
</style>
